import Vue from 'vue'


// 安装后依赖 导入使用 import 名字 from '安装的名字'
// node_module 
// vue-router.js 是vue的路由文件
import VueRouter from 'vue-router'

// 导入Home组件
import Home from '../views/Home.vue'

// 2. vue全局使用插件Vue.use(插件名,{插件的配置项})
// 不是所有插件的都是use使用
Vue.use(VueRouter)


// vue路由的配置项
const routes=[
  {
    // / 是默认加载的组件 
    path:"/", //页面的跳转路径
    name:"Home",//页面的路由名字
    component:Home   //加载的组件
  },
  {
    path:"/about", //页面的跳转路径
    name:"About",//页面的路由名字
     //组件的 按需加载 增加项目性能 
    //  项目优化方案 解决项目首屏加载时间过长的问题
    // 提升用户体验感，
    component:()=>import("../views/About.vue")
  },
  {
    path:"/cart",
    name:"Cart",
    meta:{ //路由的自定义配置
      keepAlive:true //当前组件缓存
    },
    component:()=>import("../views/Cart.vue")
  },
  {
    path:'/mine',
    name:"Mine",
    meta:{
      keepAlive:true,
      isLogin:true //当前组件是否需要登录
    },
    component:()=>import("../views/Mine.vue")
  },
  {
    // 路由设置必传参数
    // /:参数属性 固定参数的params
    // /:参数？ 可忽略的参数
    path:"/cate/:cid?",
    name:"Cate",
    component:()=>import("../views/Category.vue")
  },{
    path:"/order",
    name:"Order",
    component:()=>import("../views/order/index.vue")
  },
  {
    path:"/msg",
    name:"msg",
    component:()=>import("../views/message/index.vue")
  },{
    path:"/mycom",
    name:"mycom",
    component:()=>import("../views/mycom/index.vue")
  },
  {
    path:"/myslot",
    name:"myslot",
    component:()=>import("../views/myslot/index.vue")
  },
  {
    path:"/mytran",
    name:"mytran",
    component:()=>import("../views/mytran/index.vue"),
    meta:{ //自定义的内容
      isLogin:true
    },
    children:[ //子路由的配置项
       {
        path:"tranone", //子路由path无需加/
        name:"tranone",
        component:()=>import("../views/mytran/tranOne.vue")
       },
      {
        path:"trantwo", //子路由path无需加/
        name:"trantwo",
        component:()=>import("../views/mytran/tranTwo.vue")
       }

    ]
  },
  { //指令和自定义指令
    path:"/mydir",
    name:"mydir",
    component:()=>import("../views/mydirective/index.vue")
  },
  { //天气预报练习
    path:"/weather",
    name:"weather",
    component:()=>import("../views/weather/index.vue")
  },
  { //echart练习
    path:"/chart",
    name:"chart",
    component:()=>import("../views/chart/index.vue")
  }
]

// 创建路由对象 并导出给vue实例使用
const router=new VueRouter({
  mode:"history", //路由模式 历史模式
  routes //路由配置项
})

export default router